<template>
  <div class="customer-wrapper">
    <div class="toggle-header">
      <p
        class="toggle-header-item"
        :class="{ on: item.index === toggleIndex }"
        v-for="(item, index) in toggleHeaders"
        :key="index"
        @click="toggleIndex = item.index"
      >
        {{ item.label }}
      </p>
    </div>
    <div class="toogle-content">
      <div class="toggle-content-item information" v-show="toggleIndex === 0">
        <div class="user-info">
          <div class="info">
            <div class="left">
              <el-avatar
                shape="square"
                :size="80"
                :src="currentUserProfile.avatar"
              />
            </div>
            <div class="right">
              <p class="nick text-ellipsis">{{ currentUserProfile.nick }}</p>
              <div class="memo">
                <span>备注名：</span>
                <input
                  class="memo-ipt"
                  type="text"
                  placeholder="添加备注名"
                  v-model.trim="memoName"
                  maxlength="10"
                  size="small"
                  @blur="submitMemoName"
                />
              </div>
            </div>
          </div>
          <div class="purchase-wrapper">
            <h3>在本店的购买数据</h3>
            <div class="purchase">
              <div>
                <span>购买次数</span>
                <p>0次</p>
              </div>
              <div>
                <span>最近购买</span>
                <p>0次</p>
              </div>
              <div>
                <span>总交易额</span>
                <p>¥0.00</p>
              </div>
            </div>
          </div>
        </div>
        <div class="history">
          <h2>浏览记录</h2>
          <ul>
            <li v-for="(pdt, index) in reviewHistory" :key="index">
              <div class="left">
                <el-image
                  style="width: 80px; height: 80px"
                  :src="pdt.img"
                />
              </div>
              <div class="right">
                <p class="name text-clamp2">{{ pdt.name }}</p>
                <p class="price">{{ pdt.price | fixedPrice }}</p>
                <div class="pdt-info">
                  <p>
                    总销量: <span>{{ pdt.sales }}</span>
                  </p>
                  <p>
                    库存: <span>{{ pdt.rest }}</span>
                  </p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="toggle-content-item order" v-show="toggleIndex === 1">
        <div class="none" v-show="orderList.length === 0">
          暂无相关订单
        </div>
        <ul>
          <li v-for="order in orderList" :key="order.id">
            <div class="info">
              <span class="order-num">订单号:{{ order.id }}</span>
              <span class="order-date">{{ order.date }}</span>
            </div>
            <div class="order-pdts">
              <div class="pdt" v-for="pdt in order.pdts" :key="pdt.id">
                <div class="left">
                  <el-image
                    style="width: 80px; height: 80px"
                    :src="pdt.img"
                    fit="fill"
                  />
                </div>
                <div class="right">
                  <p class="name text-clamp2">{{ pdt.name }}</p>
                  <p class="property">{{ pdt.property }}</p>
                </div>
              </div>
            </div>
            <div class="order-overview">
              <p class="price">
                订单金额：<span>{{ order.price | fixedPrice}}</span>
              </p>
              <span class="state">{{ order.state }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { getDate } from "@/utils/date";
export default {
  name: "Coustomer",
  props: {
    customerid: String | Boolean
  },
  computed: {
    ...mapGetters(['currentUserProfile'])
  },
  data() {
    return {
      toggleIndex: 0,
      toggleHeaders: [
        {
          index: 0,
          label: "客户信息"
        },
        {
          index: 1,
          label: "客户订单"
        }
      ],
      memoName: "", // 备注名
      orderList: [
        {
          id: "2589476628934789",
          date: getDate(new Date()),
          pdts: [
            {
              id: "2256",
              img:
                "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
              name:
                "梁伸缩缝桥梁伸缩缝桥梁伸s缩缝桥梁s伸kjijkj缩缝s桥梁伸缩缝桥s梁伸缩缝ssss",
              property: "D302"
            },
            {
              id: "35",
              img:
                "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
              name: "梁伸缩缝桥梁伸缝桥梁s伸缩缝s桥梁伸缩缝桥s梁伸缩缝ssss",
              property: "D302 红"
            }
          ],
          price: 800.0,
          state: "已发货"
        },
        {
          id: "25894766286934789",
          date: getDate(new Date()),
          pdts: [
            {
              id: "225669",
              img:
                "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
              name:
                "梁伸缩缝桥梁伸缩缝桥梁伸s缩缝桥梁s伸缩缝s桥梁伸缩缝桥s梁伸缩缝ssss",
              property: "D302"
            },
            {
              id: "2256584",
              img:
                "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
              name: "梁伸缩缝桥梁伸缝桥梁s伸缩缝s桥梁伸缩缝桥s梁伸缩缝ssss",
              property: "D302 红"
            }
          ],
          price: 1200.0,
          state: "已发货"
        }
      ],
      reviewHistory: [
        {
          id: "225669",
          img:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          name:
            "梁伸缩缝桥梁伸缩缝桥梁伸s缩缝桥梁s伸缩缝s桥梁伸缩缝桥s梁伸缩缝ssss",
          price: 253,
          sales: 568,
          rest: 36
        },
        {
          id: "2256584",
          img:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          name: "梁伸缩缝桥梁伸缝桥梁s伸缩缝s桥梁伸缩缝桥s梁伸缩缝ssss",
          price: 369,
          sales: 20,
          rest: 135
        },
        {
          id: "2256584",
          img:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          name: "梁伸缩缝桥梁伸缝桥梁s伸缩缝s桥梁伸缩缝桥s梁伸缩缝ssss",
          price: 369,
          sales: 20,
          rest: 135
        },
        {
          id: "2256584",
          img:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          name: "梁伸缩缝桥梁伸缝桥梁s伸缩缝s桥梁伸缩缝桥s梁伸缩缝ssss",
          price: 369,
          sales: 20,
          rest: 135
        },
        {
          id: "2256584",
          img:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          name: "梁伸缩缝桥梁伸缝桥梁s伸缩缝s桥梁伸缩缝桥s梁伸缩缝ssss",
          price: 369,
          sales: 20,
          rest: 135
        },
        {
          id: "2256584",
          img:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          name: "梁伸缩缝桥梁伸缝桥梁s伸缩缝s桥梁伸缩缝桥s梁伸缩缝ssss",
          price: 369,
          sales: 20,
          rest: 135
        },
        {
          id: "2256584",
          img:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          name: "梁伸缩缝桥梁伸缝桥梁s伸缩缝s桥梁伸缩缝桥s梁伸缩缝ssss",
          price: 369,
          sales: 20,
          rest: 135
        }
      ]
    };
  },
  methods: {
    submitMemoName() {
      if (!this.memoName) return;
      alert(this.memoName);
    }
  }
};
</script>
<style lang="stylus" scoped>
li,ul,p,h2,h3
  margin 0
  padding 0
  font-weight normal
li
  list-style none
.text-clamp2
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
.customer-wrapper
  width 100%
  height $height
  background-color $background-light
  color $base
  border-left 1px solid #DCE1EE
.toggle-header
  height 50px
  width 100%
  display flex
  background-color #e4e9ef
  border-bottom 1px solid #DCE1EE
.toggle-header-item
  display flex
  align-items center
  justify-content center
  text-align center
  font-size 14px
  color #3C4353
  flex 0 0 50%
  width 50%
  height 100%
  margin 0
  cursor pointer
  border-bottom 1px solid transparent
  &:hover,&.on
    border-color #1182FB
    color #1182FB
.toogle-content
  height calc(100% - 50px)
  overflow-y scroll
.order
  ul
    background-color #f1f5f9
  li
    margin-bottom 10px
    padding 0 15px
    box-sizing border-box
    font-size 14px
    color #3C4353
    background-color #fff
  .info
    display flex
    justify-content space-between
    align-items center
    border-bottom 1px solid #E4E9EF
    padding 15px 0 10px
  .order-date
    color #838A9D
  .pdt
    display flex
    align-items flex-start
    justify-content flex-start
    padding 10px 0
    border-bottom 1px solid #E4E9EF
    .left
      flex 0 0 80px
      width 80px
    .right
      margin-left 15px
      width calc(100% - 95px)
      flex 0 0 calc(100% - 95px)
      line-height 22px
    .property
      color #838A9D
      margin-top 10px

  .order-overview
    display flex
    align-items center
    justify-content space-between
    padding 10px 0
  .price
    color #838A9D
    span
      color #E9433A
  .state
    color #1890FF
    padding 4px 6px
    background-color #E8F1FF
  .none
    height 100%
    padding 200px 0
    display flex
    align-items center
    justify-content center
    font-size 14px
    color #838A9D
.information
  font-size 14px
  height 100%
  .user-info
    background-color #fff
    padding 20px
    box-sizing border-box
    height 238px
  .info
    display flex
    justify-content flex-start
    align-items flex-start
    padding-bottom 10px
    border-bottom 1px solid #E4E9EF
    .left
      flex 0 0 80px
      width 80px
    .right
      width calc(100% - 80px)
      flex 0 0 calc(100% - 80px)
      padding-left 15px
      box-sizing border-box
  .memo-ipt
    border none
    line-height 20px
    padding 0 5px
  .nick
    font-weight bolder
    margin 8px 0
  .memo
    color #666666
    display flex
    align-items flex-start
    span
      flex 0 0 60px
  .price
    color #E9433A
    margin 6px 0
  .purchase-wrapper
    h3
      font-weight bolder
      margin 15px 0
  .purchase
    display flex
    justify-content space-between
    span
      color #666666
    p
      font-weight bolder
      margin-top 10px
  .history
    background-color #fff
    height calc(100% - 238px)
    h2
      font-size 14px
      background-color #f5f5f5
      height 40px
      line-height 40px
      border-bottom 1px solid #E4E9EF
      border-top 1px solid #E4E9EF
      padding-left 20px
      font-weight bolder
    ul
      padding 0 15px 10px
      box-sizing border-box
      height calc(100% - 42px)
      overflow-y scroll
    li
      display flex
      justify-content flex-start
      align-items flex-start
      padding 10px 0
      border-bottom 1px solid #E4E9EF
      .left
        flex 0 0 80px
        width 80px
      .right
        width calc(100% - 80px)
        flex 0 0 calc(100% - 80px)
        padding-left 20px
        box-sizing border-box
      .pdt-info
        display flex
        justify-content space-between
        align-items center
        color #999
        span
          color #333
</style>
